<template>
  <div class="memberInfo-container">
      <div class="text">会员信息查询</div>
      <div class="table">
          <div class="search">
              <div class="item">
                  <p>性名</p>
                  <input type="text"/>
              </div>
              <div class="item">
                  <p>电话</p>
                  <input type="text"/>
              </div>
              <div class="item">
                  <p>性别</p>
                  <input type="text"/>
              </div>
              <div class="item">
                  <p class="btnSearch">查询</p>
              </div>
          </div>
          <div class="info">
              <div class="topTitle">已选择<i class="select">1</i>项 <span style="margin-left:5px; cursor:pointer;">清空</span></div>
              <table class="form" border="1" style="border-collapse:collapse">
                  <tr>
                      <th>操作</th>
                      <th>id</th>
                      <th>性名</th>
                      <th>电话</th>
                      <th>性别</th>
                      <th>爱好</th>
                      <th>省份</th>
                      <th>城市</th>
                      <th>微信</th>
                      <th>qq</th>
                      <th>创建时间</th>
                  </tr>
                  <tr>
                      <td class="iconfont icon-icon-check"></td>
                      <td>1</td>
                      <td>xx</td>
                      <td>155****0476</td>
                      <td>男</td>
                      <td>...</td>
                      <td>...</td>
                      <td>...</td>
                      <td>...</td>
                      <td>...</td>
                      <td>...</td>
                  </tr>
              </table>
          </div>
          <Pager @handlePage="handlePageChange" :current="current" :total="503"/>
      </div>
  </div>
</template>

<script>
import Pager from "@/components/pager";
export default {
    components:{
        Pager,
    },
    data(){
        return {
            current:1,
        }
    },
    methods:{
        handlePageChange(newPage){
            console.log(newPage)
        }
    }
}
</script>

<style scoped lang="less">
@import "//at.alicdn.com/t/font_3027680_319jw8d7i1p.css";
    .memberInfo-container{
        display:flex;
        width:800px;
        height:200px;
        border:1px solid black;
        font-size:12px;
        .text{
            width:100px;
            height:100%;
            box-sizing:border-box;
            padding:10px;
            border:1px solid black;
        }
        .table{
            position:relative;
            width:700px;
            height:100%;
            box-sizing:border-box;
            padding:10px;
            border:1px solid black;
            .pager-container{
                position:absolute;
                right:10px;
                bottom:10px;
            }
            .search{
                display:flex;
                .item{
                    display:flex;
                    margin:0 7px;
                    align-items:center;
                    input{
                        height:20px;
                        width:100px;
                        margin-left:3px;
                    }
                    .btnSearch{
                        cursor:pointer;
                    }
                }
            }
            .info{
                width:100%;
                .topTitle{
                    height:25px;
                    line-height:20px;
                    width:100%;
                    border:1px solid black;
                    border-radius:7px;
                    padding:3px;
                    margin:5px 0px;
                    box-sizing:border-box;
                }
                .form{
                    tr{
                        th,td{
                            width:100px;
                            text-align:center;
                        }
                    }
                }
            }
        }
    }
</style>